<template>
  <div class="header">
    <div class="header">
      <!-- 头部背景图 -->
      <div class="bground">
        <image class="picture" src="../../../static/tabs/banner.png" mode="scaleToFill" />
        <div class="bg-cicty one">
          <img  src="../../../static/tabs/picture.png" alt="">
        </div>
        <div class="bg-cicty two">
          <img  src="../../../static/tabs/picture.png" alt="">
        </div>
        <div class="bg-cicty three">
          <img  src="../../../static/tabs/picture.png" alt="">
        </div>
        <div class="bg-cicty fore">
          <img  src="../../../static/tabs/picture.png" alt="">
        </div>
      </div>
      <!-- 头部具体信息 -->
      <div class="userInfo">
        <!-- 信息的头部 -->
        <div class="userInfo-header">
          <div class="userInfo-header-left">
            <!-- 头像 -->
            <div class="avater">
              <image class="avater-picture" src="" mode="scaleToFill" />
            </div>
            <div class="avater-icon"></div>
            <div class="info">
              <div class="infoname">
                <div class="name-text">赵露丝</div>
                <div class="zym-text">无志愿 不大学</div>
              </div>
              <div class="icon">
                <img src="../../../static/tabs/nv.png" alt="">
              </div>
            </div>
          </div>
          <div class="userInfo-header-right">
            <navigator url="/pages/" open-type="navigate" hover-class="navigator-hover">
              编辑资料
            </navigator>
          </div>
        </div>
        <!-- 数据展示 -->
        <div class="number-show">
          <div class="number" v-for="item in 4" :key="item">
            <span class="num">50</span>
            <span class="txt">培训时数</span>
          </div>
        </div>
        <!-- 信息证件 -->
        <div class="userInfo-card" :class="['userInfo-card', { 'userInfo-card-copy': isExpanded }]"  @click="change()" >
          <div class="userInfo-card-left">
            <div class="icon">
              <image class="icon-picture" src="../../../static/tabs/zhiyuanfuwu-01.png" mode="scaleToFill" />
            </div>
            <span>杭州电子科技大学志愿者证</span>
          </div>
          <div class="userInfo-card-right">
            <span class="bianhao">编号NO.<span>5699</span></span>
            <div class="erweima">
              <img src="../../../static/tabs/erweima.png" alt="">
            </div>
          </div>
        </div>
        <!-- 信息功能列表 -->
        <div class="userInfo-list">
          <navigator v-for="item in 4" :key="item" class="userInfo-list-li" url="/pages/" open-type="navigate"
            hover-class="navigator-hover">
            <image class="icon" src="../../../static/tabs/shengchanjidi.png" mode="scaleToFill" />
            <span>志愿服务</span>
          </navigator>
        </div>
        <!-- 头部具体信息的底部 -->
        <div class="userInfo-footer">
          <div class="userinfo-footer-left"></div>
          <div class="userinfo-footer-right">
            <div class="tuijian"></div>
            <div class="tuijian-botton">
              <div class="shop"></div>
              <div class="unctive"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      isExpanded:false
    }
  },
  methods:{
    
   change(){
    this.isExpanded = !this.isExpanded; // 切换展开状态
   }
  }
}
</script>

<style lang="scss">
.header {

  // 头部背景
  .bground {
    height: 290px;
    width: 100%;
    background-color: red;

    .picture {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .bg-cicty {
      position: relative;
      width: 83px;
      height: 83px;
      border-radius: 83px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .one {
      bottom: 109px;
      left: 430px;
      background-color: #47aacf;
    }
    .two {
      bottom: 210px;
      left: 510px;
      background-color: #47aacf;
    }
    .three {
      bottom: 300px;
      left: 585px;
      background-color: #47aacf;
    }
    .fore {
      bottom: 428px;
      left: 655px;
      background-color: #47aacf;
    }
  }


  // 头部信息
  .userInfo {
    // height: 720px;
    border-radius: 25px;
    background-color: #fff;
    position: relative;
    top: -20px;

    // 具体信息的头部
    .userInfo-header {
      display: flex;
      justify-content: space-between;
      align-content: center;
      height: 15%;

      .userInfo-header-left {
        position: relative;
        .avater {
          position: absolute;
          left: 60px;
          top: -70px;
          width: 167px;
          height: 168px;
          background-color: blue;
          border-radius: 100%;

          .avater-picture {
            width: 80%;
            height: 80%;
            border-radius: 100%;
          }
        }

        .avater-icon {
          width: 132px;
          height: 25px;
          background-color: #fdbf1a;
          position: absolute;
          top: 80px;
          left: 80px;
        }

        .info {
          position: relative;

          .infoname {
            margin-left: 250px;

            .name-text {
              font-size: 36px;
            }

            .zym-text {
              font-size: 18px;
            }
          }

          .icon {
            position: absolute;
            top: 30px;
            left: 395px;
            width: 30px;
            height: 33px;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }

      .userInfo-header-right {
        margin-top: 30px;
        margin-right: 32px;
        font-size: 14px;
        color: #3d99c9;
      }
    }

    // 数据展示
    .number-show {
      display: flex;
      align-content: center;
      justify-content: space-between;
      margin: 50px  80px 0 80px;

      .number {
        height: 70px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .num {
          font-size: 28px;
        }

        .txt {
          font-size: 18px;
        }
      }
    }

    // 信息证件
    .userInfo-card {
      height: 100px;
      transition: 0.3s ease;
      width: 100%;
      background-color: #23aae8;
      margin: 27px 0 22px;
      border-radius: 15px 15px 0px 0;
      display: flex;
      justify-content: space-between;
      line-height: 50px;
      align-items: flex-start;
      .userInfo-card-left {
        display: flex;
        width: 350px;
        justify-content: space-between;
        align-items: center;
        margin-left: 67px;

        span {
          color: #fff;
          font-size: 23px;
        }

        .icon {
          width: 54px;
          height: 49px;

          .icon-picture {
            width: 100%;
            height: 100%;
          }
        }
      }

      .userInfo-card-right {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 56px;
        margin-right: 22px;

        .bianhao {
          display: block;
          // width: 16px;
          height: 16px;
          font-size: 16px;
          color: #fff;

        }

        .erweima {
          width: 34px;
          height: 34px;
          margin-top: 24px;
          margin-bottom: 8px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .userInfo-card-copy {
      height: 200px;
    }

    // 信息功能列表
    .userInfo-list {
      display: flex;
      justify-content: space-between;
      padding: 0 80px;
      margin-bottom: 25px;

      .userInfo-list-li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;

        // margin-left: 10px;
        .icon {
          width: 73px;
          height: 73px;
          background-color: #a4e9fe;
          border-radius: 50px;
        }

        .test {
          display: block;
          font-size: 12px;
        }
      }
    }

    // 头部信息的底部
    .userInfo-footer {
      height: 236px;
      display: flex;
      justify-content: space-between;

      .userinfo-footer-left {
        border-radius: 10px;
        height: 100%;
        width: 40%;
        background-color: purple;
        margin-left: 18px;
      }

      .userinfo-footer-right {
        width: 60%;
        height: 100%;
        // background-color: pink;
        display: flex;
        flex-direction: column;
        margin-left: 19px;
        margin-right: 20px;

        .tuijian {
          height: 109px;
          width: 431px;
          border-radius: 5px;
          background-color: #beb4fe
        }

        .tuijian-botton {
          margin-top: 20px;
          display: flex;
          justify-content: space-between;

          .shop {
            border-radius: 10px;
            width: 206px;
            height: 109px;
            background-color: #fee2ba;
          }

          .unctive {
            border-radius: 10px;
            width: 206px;
            height: 109px;
            background-color: #fcd8d6;
          }
        }
      }
    }
  }
}
</style>
